<template>
  <div class="content">
    <div
      class="card"
      :class="recordedCards.includes(index) ? 'recorded' : ''"
      v-for="(item, index) in cards"
      :key="index"
      @click="recordCard(index)"
    >
      {{ item }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const cards = ref<string[]>([
  "乐不思蜀",
  "兵粮寸断",
  "顺手牵羊",
  "过河拆桥",
  "闪电",
  "决斗",
  "火攻",
  "铁索连环",
  "借刀杀人",
  "万箭齐发",
  "南蛮入侵",
  "无懈可击",
  "无中生有",
  "五谷丰登",
  "桃园结义",
]);
const recordedCards = ref<number[]>([]);

const recordCard = (index: number): void => {
  let key = recordedCards.value.indexOf(index);
  console.log(key);

  if (key > -1) {
    recordedCards.value.splice(key, 1);
  } else {
    recordedCards.value.push(index);
  }
};
</script>

<style scoped lang="scss">
.content {
  display: flex;
  flex-wrap: wrap;
  .card {
    padding: 10rem 20rem;
    margin: 10rem;
    border: 2px solid #bf9d5e;
    border-radius: 10rem;
    font-size: 34rem;
  }
  .recorded {
    background-color: #bf9d5e;
    color: #fff;
  }
}
</style>
